<template>
	<view class="Evaluation">
		<view style="padding-top: 80upx;">
			<view class="NavigationBox">
				<view class="NavigationItem">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FFAC3F"></u-tabs>
				</view>
			</view>
			<view class="EvaluationBox">
				<view class="contentItem" v-for="(item,index) in conList" :key="index" :data-id="item.id" :data-index="index" @click="toActivityDetails">
					<view class="contentItem_top">
						<view class="contentImage">
							<image :src="getImgUrl(item.shop_evaluation_image[0].image_url)" mode="" v-if="item.shop_evaluation_image.length>0"></image>
						</view>
						<view class="content_R">
							<view class="contentNameBox">
								<view class="contentItemName">{{item.title}}</view>
								<view class="Royalties">稿费￥{{item.talent_money}}</view>
							</view>
							<view class="addressBox">
								<view class="fieldBox">
									<view class="recommendtitle fieldtitle">领域</view>
									<view class="fieldtext" v-for="(pitem,pindex) in item.ShopEvaluationLabel" v-if="pitem.label" :key="pindex">{{pitem.label.name}}</view>
								</view>
								
								<view class="addressNum">
									<view class="address">{{item.shopObj.Shop.name}}</view>
									<view class="addressR">{{item.shopObj.distance}}km</view>
									
								</view>
								
							</view>
							<view class="fansBox">
								<view class="fansIcon" v-if="item.platform==1">
									<image src="../../static/index/fans.png" mode=""></image>
								</view>
								<view class="fansIcon" v-if="item.platform==2" style="background: #F40A0B;">
									<image src="../../static/mine/xiaohongshu_white.png" mode="widthFix" style="width: 36upx;"></image>
								</view>
								<view class="fansIcon" v-if="item.platform==3" style="background: #FFD974;">
									<image src="../../static/mine/weibo_white.png" mode="widthFix" style="width: 20upx;"></image>
								</view>
								<view class="fansIcon" v-if="item.platform==4" style="background: #F36326;">
									<image src="../../static/mine/dazong_white.png" mode="heightFix" style="height: 24upx;"></image>
								</view>
								
								<view class="fanstext"><text>粉丝数{{item.fans_num}}以上</text><text v-if="item.platform==4">;等级{{item.public_grade}}以上</text></view>
							</view>
							<view class="recommendBox">
								<view class="recommendtitle">内容</view>
								<view class="recommendtext">{{item.content}}</view>
							</view>
							
						</view>
					</view>
					<view class="contentItem_B">
						<view class="surplus">
							<!-- #ifdef APP -->
							分享达人可赚取<text>{{item.user_commission_money}}</text>元
							<!-- #endif -->
						</view>
						<view class="surplusNum">仅剩:<span style="color: #FF5555;">{{item.num}}</span>份</view>
					</view>
				</view>
			</view>
		</view>
		<view class="toastMark" v-if="markFlag" @click="markFlag=false"></view>
		<view class="toastWrap" v-if="markFlag">
			<view class="toastWrapTit">
				报名将冻结您的余额<text>{{djMoney}}</text>元
			</view>
			<view class="toastWrapCon">到店后逾期不交稿或交稿后删稿，该金额将扣除用于结付给商户；正常交稿后7天无商户的删稿投诉，该金额与稿费同步解冻。</view>
			<view class="toastBtn">
				<view class="later" @click="markFlag=false">稍后</view>
				<view class="onSure" @click="toSubmit">确认</view>
			</view>
		</view>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		data() {
			return {
				keyword:'',
				list: [{name: '报名'}, {name: '发送邀请'}],
				current: 0,
				page:1,
				conList:[],
				moreFlag:false,
				id:"",
				id1:"",
				nowIndex:-1,
				djMoney:0,
				markFlag:false
			}
		},
		components:{'number-jpan':numberJpan},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id;
				this.id1 = options.id1;
			}
			this.getList();
		},
		methods: {
			toSubmit(){
				this.markFlag = false;
				this.$refs.numberPad.open("需冻结"+this.djMoney+"元");
			},
			toActivityDetails(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let other_uid =this.id; //对方用户id
				if(!this.conList[index].num){
					uni.showToast({
						icon:'none',
						title:"名额已满"
					})
					return false;
				}
				let pages = getCurrentPages();
				if(this.current==1){
          let objs = {};
          objs.to_user_id =uni.getStorageSync("userId");
          objs.user_id = this.id;//order.toOtheruser_id
          objs.shop_evaluation_id = id;
          objs.is_accept = 0
          objs.bao = 2
          this.$u.api.shopEvaluationAccept(objs).then(ress => {
            if(ress.message=='你有测评未完成状态'){
              uni.showToast({
                icon:'none',
                title:"你有测评未完成状态,不能报名该测评!"
              })
              return false;
            }else {
              uni.navigateTo({
                url: `/pages/TUI-Chat/chat?conversationID=C2C${other_uid}`+`&user_ID=`+other_uid+`&ordersel=1&evalinfo_id=`+id
              })
            }
          })
          // let id = e.target.dataset.id || e.currentTarget.dataset.id;
          // let order_id = e.target.dataset.order_id || e.currentTarget.dataset.order_id;


					// pages[pages.length-2].$vm.sendEva(id,this.conList[index].shopObj.shop_id);
					// uni.navigateBack({
					// 	delta:1
					// })
				}else{
					this.nowIndex = index;
					this.djMoney = this.conList[this.nowIndex].frozen_money;
					this.markFlag = true;
					// this.$refs.numberPad.open();
					// pages[pages.length-2].$vm.sendEvaOrder(id);
				}
			},
			closeChange(e){
				let obj = {};
        let other_uid =this.id; //对方用户id
				obj.payPassword = e;
				obj.shop_evaluation_id = this.conList[this.nowIndex].id;
				// obj.shop_id = this.conList[this.nowIndex].shopObj.shop_id;
				// if(app.$vm.globalData.shareid&&app.$vm.globalData.cpid==obj.shop_evaluation_id){
				// 	obj.share_user_id = app.$vm.globalData.shareid;
				// }
        obj.share_user_id = this.id;
        obj.user_id = this.id1;
        obj.is_accept = 1;
        let pages = getCurrentPages();
        //先添加聊天记录
        let objs = {};
        objs.to_user_id = this.id;
        objs.user_id =uni.getStorageSync("userId"); //order.toOtheruser_id
        objs.shop_evaluation_id = this.conList[this.nowIndex].id;
        objs.is_accept = 0
        objs.bao = 1
        this.$u.api.shopEvaluationAccept(objs).then(ress => {
          if(ress.message=='你有测评未完成状态'){
            uni.showToast({
              icon:'none',
              title:"该测评待商家付款状态,不能重复操作!"
            })
            return false;
          }else {
            this.$u.api.shopEvaluationOrderAdd(obj).then(res => {
              //console.log(res)
              let orderId = res.data.id;
              //添加步骤描述
              let ors = {};
              ors.eval_orderid = res.data.id;
              ors.describe = "用户已报名,请商家及时确实.";
              ors.user_id = uni.getStorageSync("userId");
              ors.shop_userid = res.data.ShopEvaluation.user_id;
              ors.types = 0;
              this.$u.api.setStepDescribe(ors).then(re => {})

              uni.navigateTo({
                url: `/pages/TUI-Chat/chat?conversationID=C2C${other_uid}` + `&user_ID=` + other_uid + `&ordersel=1&evalorder_id=` + orderId + `&bao=1`
              })
              // pages[pages.length-2].$vm.sendEvaOrder(orderId);
              // uni.navigateBack({
              // 	delta:1
              // })
            })
                .catch(err => {
                  console.log(err)
                  if (err.message == "请先设置支付密码") {
                    uni.navigateTo({
                      url: "/pages/pageone/pages/ChangePassword1/ChangePassword1"
                    })
                  } else if (err.message == "您尚未认证名片") {
                    uni.navigateTo({
                      url: "/pages/pagefour/pages/real/real"
                    })
                  } else if (err.message == '请先完成达人认证') {
                    uni.navigateTo({
                      url: "/pages/pagefour/pages/real/real"
                    })
                  }
                })
          }
        })
			},
			getList(){
				let obj = {};
				let newObj = {};
				newObj.page = this.page;
				if(this.current==0){
					obj.user_id = this.id;
				}else{
					obj.user_id = this.id1;
				}
				obj.dimension = uni.getStorageSync("latitude")
        obj.longitude=uni.getStorageSync("longitude")
				newObj = obj;
				this.$u.api.shopEvaluationList(newObj).then(res=>{
					// console.log(res)
					if(this.page==1){
						this.conList = res.list.data.map(cur=>{
							cur.ShopEvaluationRelation = cur.ShopEvaluationRelation.map(pcur=>{
								let dis = app.$vm.getDistance(Number(pcur.Shop.longitude),Number(pcur.Shop.dimension));
								pcur.distance = dis;
								return pcur;
							})
							return cur;
						});
					}else{
						this.conList = this.conList.concat(res.list.data.map(cur=>{
							cur.ShopEvaluationRelation = cur.ShopEvaluationRelation.map(pcur=>{
								let dis = app.$vm.getDistance(Number(pcur.Shop.dimension),Number(pcur.Shop.longitude));
								pcur.distance = dis;
								return pcur;
							})
							return cur;
						}));
					}
					this.conList = this.conList.map(cur=>{
						let obj = {};
						for(let i=0;i<cur.ShopEvaluationRelation.length;i++){
							if(i==0){
								obj = cur.ShopEvaluationRelation[i];
							}else{
								if(cur.ShopEvaluationRelation[i].distance<obj.distance){
									obj = cur.ShopEvaluationRelation[i];
								}
							}
						}
						cur.shopObj = obj;
						return cur;
					})
					if(this.page<res.list.total){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			},
			getImgUrl(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			change(index) {
				this.current = index;
				this.page = 1;
				this.getList();
			},
			searchBtn(){
				console.log(this.keyword);
			}
		}
	}
</script>

<style scoped lang="less">
	// ````````````````````````````````````````````````
	.toastMark{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99998;
		background: rgba(0,0,0,.2);
	}
	.toastWrap{
		width: 540upx;
		padding-top: 56upx;
		border-radius: 12upx;
		background: white;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 99999;
	}
	.toastWrapTit{
		font-size: 32upx;
		font-weight: bold;
		color: #000000;
		margin-bottom: 32upx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 60upx;
	}
	.toastWrapTit>text{
		font-size: 32upx;
		font-weight: bold;
		color: #FF5555;
	}
	.toastWrapCon{
		font-size: 28upx;
		line-height: 36upx;
		color: #878787;
		width: 100%;
		box-sizing: border-box;
		padding: 0 60upx;
	}
	.toastBtn{
		display: flex;
		margin-top: 40upx;
		border-top: 2upx solid #DDDDDD;
		align-items: center;
	}
	.later{
		width: 50%;
		height: 98upx;
		line-height: 98upx;
		text-align: center;
		border-right: 2upx solid #DDDDDD;
		font-size: 36upx;
		color: #000000;
	}
	.onSure{
		width: 50%;
		height: 98upx;
		line-height: 98upx;
		text-align: center;
		font-size: 36upx;
		color: #108DE9;
	}
	// `````````````````````````````````````````````````
	
	
	
.Evaluation{
	background-color: #F3F3F3;
	min-height: 100vh;
	overflow: auto;
	// padding-top: 204upx;
	// padding-top: 88upx;
	.NavigationBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 999;
		.searchBox{
			width: 650upx;
			padding: 24upx 32upx;
			height: 88upx;
		}
		.NavigationItem{
			// padding-top: 88upx;
		}
	}
	.EvaluationBox{
		padding: 16upx 24upx;
		.contentItem{
			width: 702upx;
			height: auto;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20upx;
			margin-bottom: 16upx;
			.contentItem_top{
				display: flex;
				padding: 32upx 0 24upx 24upx;
				.contentImage{
					width: 144upx;
					height: 144upx;
					border-radius: 8upx;
					margin-right: 16upx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
				.content_R{
					width: calc(100% - 160upx);
					.contentNameBox{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.contentItemName{
							font-size: 24upx;
							color: #333333;
						}
						.Royalties{
							// width: 92upx;
							// height: 32upx;
							background: linear-gradient(206deg, #FAD96C 0%, #FFAC3F 100%);
							opacity: 1;
							border-radius: 20upx 0 0 20upx;
							font-size: 16upx;
							color: #fff;
							
							padding: 8upx;
						}
					}
					.addressBox{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 8upx;
						padding-right: 24upx;
						
						.addressNum{
							display: flex;
							align-items: center;
							.address{
								// width: 300upx;
								margin-right: 10upx;
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
							.addressR{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
						}
					}
					.fansBox{
						display: flex;
						align-items: center;
						margin-top: 8upx;
						
						.fansIcon{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 48upx;
							height: 24upx;
							background: #260A20;
							opacity: 1;
							border-radius: 4upx;
							image{
								width: 24upx;
								height: 24upx;
							}
						}
						.fanstext{
							width: calc(100% - 48upx);
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.recommendBox{
						display: flex;
						align-items: center;
						margin-top: 8upx;
						.recommendtitle{
							width: 48upx;
							height: 24upx;
							background: #FFAC3F;
							opacity: 1;
							border-radius: 4upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							text-align: center;
							line-height: 24upx;
							color: #FFFFFF;
							// padding: 4upx;
							// box-sizing: border-box;
							margin-right: 8upx;
						}
						.recommendtext{
							width: calc(100% - 48upx);
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.fieldBox{
						display: flex;
						align-items: center;
						// margin-top: 18upx;
						.fieldtitle{
							width: 48upx;
							height: 24upx;
							background: #FF5555;
							opacity: 1;
							border-radius: 4upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 24upx;
							text-align: center;
							color: #FFFFFF;
							// padding: 4upx;
						}
						.fieldtext{
							// width: calc(100% - 48upx);
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
			.contentItem_B{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24upx;
				height: 44upx;
				background-color: #FFEBD0;
				border-radius: 0 0 20upx 20upx;
				box-sizing: border-box;
				.surplus{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					text{
						font-size: 24upx;
						color: red;
					}
				}
				.surplusNum{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
}
</style>
